<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            height: 800px;
            overflow: hidden;
            border: 1px solid black;

            position: relative;
        }

        button {
            z-index: 3;
        }
    </style>
</head>

<body>
    <button id="o">创建矩形</button><button id="z">创建圆形</button><button id="s">创建三角形</button>
    <div class="box">

    </div>

</body>

</html>
<script>

    class Cav { //创建父类 将效果的共有属性 和方法 提取出来
        constructor() {

        }
        drp(id) {//拖拽
            let d = "#" + id
            console.log(d);
            let div = this.$("body")
            this.div = div
            this.flag = false
            div.addEventListener('mousedown', e => {
                e.target.style.zIndex = 3
            
                let t = e.target || e.srcElement;  //兼容事件源
                e.preventDefault();//取消默认行为
                this.pos = { //记录鼠标到元素得位置
                    x: e.offsetX,
                    y: e.offsetY
                }
                this.flag = true

            })
            div.addEventListener('mousemove', e => {
                console.log(e.clientX,e.clientY);
                if (this.flag) {
                    let x = e.target.style.width
                    let y = e.target.style.height
                    let x2 = x.slice(0, -2)
                    let y2 = y.slice(0, -2)
                    let sk = e.target.id.slice(0,3)
                    console.log(sk);
                    if (e.target.className !== "box" && sk !== "SAN")  {
                        e.target.style.left = e.clientX * 1 - x2 / 2 + 'px';
                        e.target.style.top = e.clientY * 1 - y2/2 + 'px';
                       this.e = e.target.style.zIndex 
                       this.e.style.zIndex = "3"
                    }
                    if(sk === "SAN"){
                        e.target.style.left = e.clientX * 1 - 10 +'px';
                        e.target.style.top =e.clientY * 1 +10 + 'px';
                        console.log(  e.target.style.left,  e.target.style.top );
                    }

                }

            })
            div.addEventListener("mouseup", e => {
                this.flag = false;
                this.e.style.zIndex = "1"
            })
        }
        color() { //随机颜色
            let str = `rgb(${this.max(0, 255)},${this.max(0, 255)},${this.max(0, 255)})`
            return str
        }
        max(a, b) { //随机数
            let num = Math.floor(Math.random() * (b - a) + a) + 1
            return num
        }
        add(dom, dom2) {//元素的添加
            dom.appendChild(dom2)
            this.drp(dom2.id)
        }
        w() {//获取屏幕宽度 和 高度

            let obj = {
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            }
            return obj

        }
        id() {
            let str = "aqz-xs-wcdef-vrgb-thn-yjmu-okpl-pZAQS-XWDCE-FVRGBT-HNYJU-NKIM-OL-P-"
            let id = ""
            for (let i = 0; i < 8; i++) {
                id += str[this.max(0, str.length)]
            }
            return id
        }
        $(e) {
            return document.querySelector(e)
        }
        ges(el) {
            return document.querySelectorAll(el)
        }

    }
    class Es extends Cav { // 子类
        constructor() {
            super()
            this.dom = document.querySelector("body")
            this.event(this.dom)
        }
        event(obj) {
            obj.addEventListener("click", e => {
                let name = e.target.id
                if (name === "o") this.casr(0);
                if (name === "z") this.casr(1);
                if (name === "s") this.casr(3);
            })
        }

        casr(ks) {
            let d = this.$(".box")
            let obj = this.w()
            let yuan = document.createElement("div")
            let k = this.max(50, 300) + "px"

            if (ks === 3) {
                yuan.style.width = "0px"
                yuan.style.height = "0px"
                yuan.style.borderWidth = this.max(10, 100) + "px"
                yuan.style.borderStyle = "solid"
                yuan.style.borderColor = "transparent transparent " + this.color()
                yuan.style.borderImage = "initial"
                yuan.style.transform = "rotate(100deg)"
                yuan.id ="SAN" +this.id()
            } else {
                yuan.style.width = ks ? k : this.max(50, 300) + "px"
                yuan.style.height = ks ? k : this.max(50, 300) + "px"
                yuan.style.backgroundColor = this.color()
                yuan.style.borderRadius = ks ? "50%" : "0%"
                yuan.id = this.id()
            }

            yuan.style.position = "absolute"
            yuan.style.top = this.max(0, obj.y) + "px"
            yuan.style.left = this.max(0, obj.x) + "px"
            
            this.add(d, yuan)
            console.log(yuan);
        }
    }
    let es = new Es()

</script>